<template>
  <div class="videocon">
    <div class="left" :style="listWidth">
      <div class="resoure">
        <div class="video" :style="{ transform: 'rotate(' + 90 * transIdx + 'deg)' }">
          <video :src="url" v-if="loaded == true" ref="myVideo" autoplay></video>
        </div>
        <div class="play" @click="play">
          <span class="iconfont" v-if="playing == true">&#xe67b;</span>
          <span class="iconfont" v-else>&#xe87c;</span>
        </div>
        <div class="hide" @click="hideBtn">
          <span class="iconfont" v-if="show == true">&#xe775;</span>
          <span class="iconfont" v-else>&#xe779;</span>
        </div>
        <div class="set-wrap" v-if="isSet">
          <div class="turn no-select" style="display: flex;">
            <div class="turn-left" @click="turnLeft">逆时针选择</div>
            <div class="turn-right" @click="turnRight">顺时针选择</div>
          </div>
          <div class="speed">
            <ul>
              <li class="middle" v-for="(x, y) in speeds" :key="y" @click="selectSpeed(y)"
                :style="active('speedIdx', y)">{{ x }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="control">
        <div class="up">
          <div class="progress" @click="changeProgress($event)">
            <div class="line" :style="{ background: theme, width: line + 'px' }"></div>
          </div>
        </div>
        <div class="down">
          <div class="time">
            {{ time }}
          </div>
          <ul class="center no-select">
            <li @click="stop">
              <span class="iconfont">&#xe615;</span>
            </li>
            <li @click="last">
              <span class="iconfont">&#xe63d;</span>
            </li>
            <li @click="play">
              <span class="iconfont" v-if="playing == true">&#xe67b;</span>
              <span class="iconfont" v-else>&#xe87c;</span>
            </li>
            <li @click="next">
              <span class="iconfont">&#xe63e;</span>
            </li>
            <li @click="showVoice">
              <span class="iconfont">&#xe8b8;</span>
            </li>
          </ul>
          <div class="set">
            <div v-for="(x, y) in setIcons" :key="y" @click="selectSet(y)">
              <span class="iconfont">{{ x }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right" v-if="show == true">
      <div class="mode">
        <div v-for="(x, y) in listIcons" :key="y" @click="listFun(y)">
          <span class="iconfont" v-if="y == 0 && classIdx == 0">&#xe6a0;</span>
          <span class="iconfont" v-if="y == 0 && classIdx == 1">&#xe60f;</span>
          <span v-if="y != 0" class="iconfont">{{ x }}</span>
        </div>
      </div>
      <div class="files">
        <div v-for="(x, y) in files" :key="y" @click="selectClassify(y)" :style="active('fileIdx', y)">
          {{ x }}
        </div>
      </div>
      <div class="videolist">
        <div class="menu">
          <ul :class="classIdx == 0 ? 'big' : 'small'">
            <li v-for="(x, y) in lists" :key="y" @click="selecList(y)" :style="active('listIdx', y)">
              <p v-if="classIdx == 0">
                <video :src="x.path"></video>
              </p>
              <p>{{ x.title }}</p>
              <p v-if="classIdx == 1"></p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import system from '@/utils/system.js'
import global from '@/utils/global.js'
import { ref, onMounted } from 'vue'
import { queryData } from '@/apis/mysql';
const listWidth = ref(0)
const listIdx = ref(0)
const line = ref(0)
const count = ref(0)
const fileIdx = ref(0)
const mode = ref(0)
const wid = ref(0)
const classIdx = ref(0)
const transIdx = ref(0)
const speedIdx = ref(2)
const myVideo = ref(null)
const show = ref(false)
const loaded = ref(false)
const isSet = ref(false)
const playing = ref(false)
const url = ref('')
const title = ref('')
const time = ref('')
const videoPath = ref('')
const theme = ref('rgb(0,150,255)')
const defaultColor = ref('rgba(220,220,200)')
const lists = ref([])
const files = ref([])
const windowIcons = ref(['\ue890', '\ue624', '\ue617', '\ueaf2'])
const menu = ref(['\ue615', '\ue63d', '\ue87c', '\ue63e', '\ue8b8'])
const setIcons = ref(['\ue642', '\ueafa', '\ue7ba'])
const listIcons = ref(['\ue60f', '\uea83', '\ue625', '\ue634'])
const speeds = ref([0.1, 0.5, 1, 1.5, 2, 5])
onMounted(() => {
  // // console.log(myVideo.value)
  getPath()
  keyUp()
})


function getPath() {
  queryData({
    table: 'resources',
    data: {
      name: 'video'
    }
  }).then((res) => {
    let obj = res.data[0]
    videoPath.value = `${obj.disk}:/${obj.path}`
    localDir()
  })
}

function localDir() {
  system.readDir(videoPath.value).then(res => {
    files.value = res
    localClassify()
  })
}
function localClassify() {
  const list = []
  const dir = videoPath.value + '/' + files.value[fileIdx.value]
  system.readDir(dir).then(res => {
    res.map(x => {
      list.push({
        title: x,
        path: dir + '/' + x
      })
    })
    lists.value = list
    listIdx.value = 0
    startPlay()
  })
}
function selectClassify(y) {
  fileIdx.value = y
  localClassify()
}
function startPlay() {
  if (lists.value.length != 0) {
    count.value = lists.value.length
    // console.log(count.value)
    replay()
    listen()
  }
}
function active(string, y) {
  if (string == y) {
    return {
      color: theme.value
    }
  } else {
    return {
      color: defaultColor.value
    }
  }
}
function listen() {
  myVideo.value.addEventListener('timeupdate', () => {
    let cur = myVideo.value.currentTime
    let dur = myVideo.value.duration
    time.value = global.formatTime(cur) + ' / ' + global.formatTime(dur)
    line.value = (cur / dur) * myVideo.value.offsetWidth
    if (cur == dur) {
      playMode()
    }
  })
}
function selecList(y) {
  listIdx.value = y
  replay()
}
function selectSet(y) {
  switch (y) {
    case 0:
      if (isSet.value) {
        isSet.value = false
      } else {
        isSet.value = true
      }
      break
  }
}
function selectSpeed(y) {
  speedIdx.value = y
  myVideo.playbackRate = speeds.value[y]
}
function stop() {
  playing.value = false
  loaded.value = false
  listIdx.value = -1
}
function play() {
  if (playing.value == false) {
    playing.value = true
    myVideo.value.play()
  } else {
    playing.value = false
    myVideo.value.pause()
  }
}
function resetOption() {
  transIdx.value = 0
  speedIdx.value = 0
}
function replay() {
  loaded.value = true
  playing.value = true
  if (listIdx.value != -1) {
    title.value = lists.value[listIdx.value].title
    url.value = lists.value[listIdx.value].path
    listen()
  }
}
function last() {
  if (listIdx.value > 0) {
    listIdx.value = listIdx.value - 1
  } else {
    listIdx.value = count.value - 1
  }
  replay()
}
function next() {
  if (listIdx.value < count.value - 1) {
    listIdx.value = listIdx.value + 1
  } else {
    listIdx.value = 0
  }
  // console.log(listIdx.value, count.value - 1)
  replay()
}
function prev() {
  if (myVideo.value.currentTime > 0) {
    myVideo.value.currentTime -= 5
  } else {
    myVideo.value.currentTime = 10
  }
}
function turnLeft() {
  if (transIdx.value > 0) {
    transIdx.value--
  } else {
    transIdx.value = 3
  }
}
function turnRight() {
  if (transIdx.value < 3) {
    transIdx.value++
  } else {
    transIdx.value = 0
  }
  // console.log(transIdx)
}
function fast() {
  if (myVideo.value.currentTime < myVideo.value.duration) {
    myVideo.value.currentTime += 10
  } else {
    myVideo.value.currentTime = myVideo.value.duration
  }
}
function playMode() {
  switch (mode.value) {
    case 0:
      myVideo.value.currentTime = 0
      break;
    case 1:
      next()
      break;
  }
}
function changeProgress(e) {
  if (listIdx.value != -1) {
    myVideo.value.currentTime =
      (e.offsetX / myVideo.value.offsetWidth) * myVideo.value.duration
  }
}
function showVoice() {
  myVideo.value.volume = 0
}
function hideBtn() {
  if (show.value == false) {
    show.value = true
    wid.value = 260
  } else {
    show.value = false
    wid.value = 0
  }
}
function lastClassify() {
  if (fileIdx.value > 0) {
    fileIdx.value -= 1;
    localClassify()
  } else {
    fileIdx.value = files.value.length;
  }
}
function nextClassify() {
  if (fileIdx.value < files.length) {
    fileIdx.value += 1;
    localClassify()
  } else {
    fileIdx.value = 0;
  }
}
function keyUp() {
  document.addEventListener('keypress', (e) => {
    switch (e.code) {
      case 'KeyW':
        last()
        break;
      case 'KeyS':
        next()
        break;
      case 'KeyQ':
        stop()
        break;
      case 'KeyE':
        play()
        break;
      case 'KeyA':
        prev()
        break;
      case 'KeyD':
        fast()
        break;
      case 'Space':
        play()
        break;
      case 'KeyZ':
        lastClassify()
        break;
      case 'KeyC':
        nextClassify()
        break;
    }
  })
}
function changeJson(list) {
  let content = JSON.stringify({
    list
  })
  let dir = __dirname + '/index.json'
  system.writeFile(dir, content).then(() => {
    alert('成功')
    startPlay()
  })
}
function listFun(y) {
  switch (y) {
    case 0:
      if (classIdx.value == 0) {
        classIdx.value = 1
      } else {
        classIdx.value = 0
      }
      break
    case 2:
      var inputObj = document.createElement('input')
      inputObj.setAttribute('id', '_ef')
      inputObj.setAttribute('webkitdirectory', '')
      inputObj.setAttribute('type', 'file')
      inputObj.setAttribute('style', 'visibility:hidden')
      document.body.appendChild(inputObj)
      inputObj.click()
      //inputObj.value;
      inputObj.onchange = event => {
        let list = []
        let arr = event.target.files

        for (let i = 0; i < arr.length; i++) {
          list.push({
            title: arr[i].name.split('.')[0],
            path: arr[i].path
          })

          if (i == arr.length - 1) {
            changeJson([...lists, ...list])
          }
        }
      }
      break
    case 3:
      var list = []
      lists.map((x, y) => {
        if (y != listIdx.value) {
          list.push(x)
        }
        if (y == lists.value.length - 1) {
          changeJson(list.value)
        }
      })
      break
  }
}

</script>
<style lang="scss" scoped>
$color_1: rgba(220, 220, 200);
$color_2: rgb(0, 150, 255);
$background_color_1: #111;
$background_color_2: rgb(17, 17, 17);
$background_color_3: #000;
$background_color_4: rgb(77, 77, 77);

.videocon {
  width: 100%;
  height: 100%;
  background-color: $background_color_1;
  color: $color_1;
  background-color: $background_color_2;
  display: flex;

  .left {
    height: calc(100% - 50px);

    .resoure {
      width: 100%;
      height: 100%;
      background-color: $background_color_3;
      position: relative;
      overflow: hidden;

      // 显示
      &:hover {
        .play {
          display: block;
        }

        .hide {
          display: block;
        }
      }

      // 播放按钮
      .play {
        width: 50px;
        height: 50px;
        position: absolute;
        margin: -25px;
        top: 50%;
        left: 50%;
        cursor: pointer;
        display: none;

        span {
          font-size: 36px;
        }
      }

      // 隐藏按钮
      .hide {
        position: absolute;
        width: 30px;
        height: 50px;
        line-height: 50px;
        top: 50%;
        right: 0;
        margin-top: -25px;
        text-align: center;
        background-color: $background_color_2;
        cursor: pointer;
        display: none;
      }

      .video {
        width: 100%;
        height: 100%;
      }

      // 视频
      video {
        width: 100%;
        height: 100%;
      }

      .set-wrap {
        width: 200px;
        height: 200px;
        background-color: $background_color_2;
        position: absolute;
        right: 0;
        bottom: 0;

        >div {
          display: flex;
          justify-content: space-between;

          >div {
            cursor: pointer;
            margin: 10px;
          }
        }

        .speed {
          ul {
            display: flex;

            li {
              width: 30px;
              height: 30px;
              cursor: pointer;
            }
          }
        }
      }
    }

    .control {
      width: 100%;
      height: 50px;
      position: relative;

      .up {
        width: 100%;
        height: 6px;
        position: absolute;
        top: -6px;

        .progress {
          width: 100%;
          height: 4px;
          cursor: pointer;
          background-color: $background_color_4;
          margin-top: 2px;

          .line {
            height: 100%;
          }
        }

        &:hover {
          .progress {
            height: 6px;
            margin: 0;
          }
        }
      }

      .down {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;

        .center {
          width: 250px;
          height: 100%;
          color: $color_2;
          display: flex;

          li {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            margin: 7px;
            border-radius: 50%;
            border: 2px solid rgb(0, 150, 255);
            cursor: pointer;
          }
        }

        .time {
          width: 120px;
          height: 50px;
          line-height: 50px;
          text-align: center;
        }

        .set {
          width: 150px;
          height: 50px;
          display: flex;

          >div {
            width: 50px;
            height: 50px;
            line-height: 50px;
            user-select: none;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }

  .right {
    width: 260px;
    display: flex;
    flex-direction: column;

    .mode {
      width: 100%;
      height: 30px;
      display: flex;

      >div {
        width: 30px;
        height: 30px;
        line-height: 30px;
        position: relative;
        text-align: center;

        span {
          font-size: 12px;
        }
      }
    }

    .files {
      display: flex;
      flex-wrap: wrap;

      div {
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        text-align: center;
      }
    }

    .videolist {
      overflow: auto;
      padding: 10px;

      ul.big {
        li {
          width: 100%;
          height: 80px;
          margin-bottom: 10px;
          display: flex;
          font-size: 12px;
          overflow: hidden;

          p {
            &:first-child {
              width: 120px;
              height: 80px;
              margin-right: 10px;
              overflow: hidden;
              cursor: pointer;
            }

            &:last-child {
              width: calc(100% - 130px);
              height: 80px;
            }
          }

          video {
            width: 100%;
            height: 100%;
          }
        }
      }

      ul.small {
        li {
          width: 100%;
          height: 30px;
          display: flex;

          p {
            &:first-child {
              width: calc(100% - 60px);
              height: 30px;
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-indent: 12px;
            }

            &:last-child {
              width: 60px;
              height: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
